<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站管理系统</title>
    <!-- Bootstrap CSS -->
    <link th:href="@{/css/bootstrap.css}" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Simple DataTables CSS -->
    <link th:href="@{/css/tables.css}" rel="stylesheet">
    <link rel="shortcut icon" th:href="@{../ico/favicon.ico}"/>
    <!--修改密码css-->
    <style>
        /* 添加以下CSS样式 */
        .toggle-password {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .toast {
            min-width: 300px;
        }

        /* 密码强度指示器 */
        .password-strength {
            height: 5px;
            margin-top: 5px;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .password-strength.weak {
            background-color: #e74c3c;
            width: 33%;
        }

        .password-strength.medium {
            background-color: #f39c12;
            width: 66%;
        }

        .password-strength.strong {
            background-color: #27ae60;
            width: 100%;
        }
    </style>
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow-x: hidden;
            color: #333;
            background-color: #f8f9fa;
            padding-top: 20px;
        }

        /* 在style区域添加 */
        .nav-image-container {
            width: 80px;
            height: 50px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nav-image-container img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .nav-image-container img:hover {
            transform: scale(1.1);
        }

        .container {
            max-width: 1200px;
        }

        .url-link {
            color: #3498db;
            text-decoration: none;
            font-weight: 500;
            display: inline-block;
            max-width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: all 0.2s ease;
        }

        .url-link:hover {
            color: #2980b9;
            text-decoration: underline;
        }

        .table a {
            color: #3498db;
            text-decoration: none;
            font-weight: 500;
            padding: 4px 8px;
            border-radius: 4px;
            background-color: rgba(52, 152, 219, 0.1);
            transition: all 0.2s ease;
        }

        .table a:hover {
            background-color: rgba(52, 152, 219, 0.2);
            text-decoration: underline;
        }

        /* 侧边栏样式 */
        .sidebar {
            min-height: 100vh;
            background-color: #2c3e50;
            color: white;
            transition: all 0.3s ease;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }

        .sidebar .nav-link {
            color: rgba(255, 255, 255, 0.8);
            padding: 0.8rem 1.5rem;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
        }

        .sidebar .nav-link:hover {
            color: white;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .sidebar .nav-link.active {
            color: white;
            background-color: #3498db;
            border-left: 3px solid #2980b9;
        }

        .sidebar .nav-link i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        /* 内容区域样式 */
        .content {
            transition: all 0.3s ease;
            padding: 2rem;
        }

        .page-title {
            margin-bottom: 1.5rem;
            color: #2c3e50;
            font-weight: 600;
            position: relative;
            padding-bottom: 0.5rem;
        }

        .page-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: #3498db;
        }

        /* 卡片样式 */
        .card {
            border: none;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 30px;
        }

        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            background-color: white;
            border-bottom: 1px solid #f1f1f1;
            font-weight: 500;
            color: #2c3e50;
        }

        /* 按钮样式 */
        .btn {
            transition: all 0.2s ease;
            border-radius: 4px;
        }

        .btn-primary {
            background-color: #3498db;
            border-color: #3498db;
        }

        .btn-primary:hover {
            background-color: #2980b9;
            border-color: #2980b9;
        }

        .btn-danger {
            background-color: #e74c3c;
            border-color: #e74c3c;
        }

        .btn-danger:hover {
            background-color: #c0392b;
            border-color: #c0392b;
        }

        .btn-outline-secondary {
            transition: all 0.2s ease;
        }

        .btn-outline-secondary:hover {
            background-color: #6c757d;
            color: white;
        }

        .btn-action {
            margin: 0 3px;
        }

        /* 表格样式 */
        table.dataTable {
            border-collapse: separate;
            border-spacing: 0;
        }

        table.dataTable thead th {
            background-color: #f8f9fa;
            border-bottom: 2px solid #e9ecef;
            font-weight: 600;
            color: #495057;
        }

        table.dataTable tbody tr {
            transition: background-color 0.2s ease;
        }

        table.dataTable tbody tr:hover {
            background-color: rgba(52, 152, 219, 0.05);
        }

        /* 表单样式 */
        .form-control {
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            border-radius: 4px;
        }

        .form-control:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        /* 模态框样式 */
        .modal-content {
            border-radius: 8px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            animation: modalFadeIn 0.3s ease;
        }

        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .modal-header {
            border-bottom: 1px solid #f1f1f1;
        }

        .modal-title {
            color: #2c3e50;
            font-weight: 600;
        }

        /* 图片样式 */
        .image-preview {
            max-width: 150px;
            max-height: 150px;
            margin-top: 10px;
            border-radius: 4px;
        }

        /* 消息提示 */
        .message {
            margin-bottom: 20px;
            padding: 10px 15px;
            border-radius: 4px;
        }

        .success {
            background-color: #d1e7dd;
            color: #0f5132;
            border: 1px solid #badbcc;
        }

        .error {
            background-color: #f8d7da;
            color: #842029;
            border: 1px solid #f5c2c7;
        }

        /* 加载动画 */
        .loading {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 3px solid rgba(255, 255, 255, .3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* 标签页样式 */
        .tab-content {
            padding: 20px 0;
        }

        .nav-tabs {
            margin-bottom: 20px;
        }

        /* 页面内容样式 */
        .page-content {
            display: none;
        }

        .page-content.active {
            display: block;
        }

        /* 移动端菜单 */
        .mobile-menu-toggle {
            display: none;
            position: fixed;
            top: 15px;
            left: 15px;
            z-index: 1050;
            background-color: #3498db;
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        @media (max-width: 768px) {
            .mobile-menu-toggle {
                display: flex;
            }

            .sidebar {
                position: fixed;
                z-index: 1040;
                transform: translateX(-100%);
            }

            .sidebar.show {
                transform: translateX(0);
            }

            .content {
                padding: 1rem;
                margin-left: 0 !important;
            }
        }
    </style>
</head>
<body>
<!-- 移动端菜单按钮 -->
<button class="mobile-menu-toggle d-flex align-items-center justify-content-center">
    <i class="fas fa-bars"></i>
</button>

<div class="container-fluid p-0">
    <div class="row g-0">
        <!-- 左侧导航栏 -->
        <div class="col-md-3 col-lg-2 sidebar">
            <div class="p-3 mb-4 border-bottom border-light">
                <h4 class="text-white mb-0"><i class="fas fa-cogs me-2"></i>网站管理系统</h4>
            </div>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" id="site-settings-link" href="#site-settings-page">
                        <i class="fas fa-cog"></i>网站设置
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="category-link" href="#category-page">
                        <i class="fas fa-folder"></i>分类管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="navigation-link" href="#navigation-page">
                        <i class="fas fa-link"></i>导航管理
                    </a>
                </li>
            </ul>
        </div>

        <!-- 主内容区域 -->
        <div class="col-md-9 ms-sm-auto col-lg-10 px-md-4 content">
            <!-- 消息提示 -->
            <div th:if="${message != null}" class="message success" th:text="${message}"></div>

            <!-- 网站设置页面 -->
            <div id="site-settings-page" class="page-content active">
                <h2 class="page-title">网站设置</h2>

                <!-- 网站标题设置 -->
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-heading mr-2"></i>网站标题设置
                    </div>
                    <div class="card-body">
                        <form id="title-form" th:action="@{/admin/updateTitle}" method="post">
                            <div class="mb-3">
                                <label for="siteTitle" class="form-label">网站标题</label>
                                <input type="text" class="form-control" id="siteTitle" name="siteTitle"
                                       th:value="${siteConfig != null ? siteConfig.siteTitle : '网站导航'}" required>
                            </div>
                            <button type="button" id="save-title" class="btn btn-primary">
                                <i class="fa fa-save mr-1"></i>保存设置
                            </button>
                        </form>
                    </div>
                </div>

                <!-- 返回前台按钮 -->
                <!-- 在网站设置页面的按钮区域添加修改密码按钮 -->
                <div class="text-center mb-5">
                    <a href="/" class="btn btn-outline-primary me-2">
                        <i class="fa fa-home mr-1"></i>返回前台
                    </a>
                    <button type="button" class="btn btn-outline-warning me-2" data-bs-toggle="modal"
                            data-bs-target="#changePasswordModal">
                        <i class="fa fa-key mr-1"></i>修改密码
                    </button>
                    <a href="/logout" class="btn btn-outline-danger">
                        <i class="fa fa-sign-out-alt mr-1"></i>退出登录
                    </a>
                </div>
            </div>

            <!-- 分类管理页面 -->
            <div id="category-page" class="page-content">
                <h2 class="page-title">分类管理</h2>
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><i class="fa fa-folder mr-2"></i>分类列表</span>
                        <button type="button" class="btn btn-primary btn-sm" id="add-category">
                            <i class="fas fa-plus me-1"></i>新增分类
                        </button>
                    </div>
                    <div class="card-body">
                        <table id="categoryTable" class="table table-striped">
                            <thead>
                            <tr>
                                <th>编号</th>
                                <th>分类名称</th>
                                <th>排序顺序</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="category : ${categories}">
                                <td th:text="${category.id}">1</td>
                                <td th:text="${category.name}">技术学习</td>
                                <td th:text="${category.sortOrder}">0</td>
                                <td>
                                    <button class="btn btn-sm btn-primary btn-action edit-category"
                                            th:data-id="${category.id}"
                                            th:data-name="${category.name}"
                                            th:data-sort="${category.sortOrder}">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <a th:href="@{/admin/category/delete/{id}(id=${category.id})}"
                                       class="btn btn-sm btn-danger btn-action"
                                       onclick="return confirm('确定要删除这个分类吗？该分类下的所有导航也会被删除！')">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 导航管理页面 -->
            <div id="navigation-page" class="page-content">
                <h2 class="page-title">导航管理</h2>
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span><i class="fa fa-link mr-2"></i>导航列表</span>
                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                data-bs-target="#addNavigationModal">
                            <i class="fas fa-plus me-1"></i>新增导航
                        </button>
                    </div>
                    <div class="card-body">
                        <!-- 导航列表 -->
                        <table id="navigationTable" class="table table-striped">
                            <thead>
                            <tr>
                                <th>编号</th>
                                <th>所属分类</th>
                                <th>导航标题</th>
                                <th>链接地址</th>
                                <th>封面图片</th>
                                <th>排序顺序</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="nav : ${navigations}">
                                <td th:text="${nav.id}">1</td>
                                <td th:text="${nav.categoryName}">技术学习</td>
                                <td th:text="${nav.title}">GitHub</td>
                                <td>
                                    <a th:href="${nav.url}" target="_blank" th:text="${nav.url}">https://github.com</a>
                                </td>
                                <td>
                                    <div class="nav-image-container">
                                        <th:block
                                                th:if="${nav.imageUuid != null and not #strings.isEmpty(nav.imageUuid)}">
                                            <img th:src="@{'/image/' + ${nav.imageUuid}}"
                                                 th:alt="${nav.title} + '的封面图'"
                                                 class="image-preview">
                                        </th:block>
                                        <span th:unless="${nav.imageUuid != null and not #strings.isEmpty(nav.imageUuid)}">无图片</span>
                                    </div>
                                </td>
                                <td th:text="${nav.sortOrder}">0</td>
                                <td>
                                    <button class="btn btn-sm btn-primary btn-action edit-navigation"
                                            th:data-id="${nav.id}"
                                            th:data-category-id="${nav.categoryId}"
                                            th:data-title="${nav.title}"
                                            th:data-url="${nav.url}"
                                            th:data-sort="${nav.sortOrder}"
                                            th:data-image-uuid="${nav.imageUuid}">
                                        <i class="fa fa-edit"></i>
                                    </button>
                                    <a th:href="@{/admin/navigation/delete/{id}(id=${nav.id})}"
                                       class="btn btn-sm btn-danger btn-action"
                                       onclick="return confirm('确定要删除这个导航吗？')">
                                        <i class="fa fa-trash"></i>
                                    </a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加导航模态框 -->
<div class="modal fade" id="addNavigationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加导航</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <form id="addNavigationForm" action="/admin/navigation/add" method="post" enctype="multipart/form-data"
                      class="row g-3">
                    <div class="col-md-4">
                        <label for="addNavCategory" class="form-label">所属分类</label>
                        <select class="form-select" id="addNavCategory" name="categoryId" required>
                            <option value="">请选择分类</option>
                            <option th:each="category : ${categories}"
                                    th:value="${category.id}"
                                    + th:text="${category.name}">技术学习
                            </option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="addNavTitle" class="form-label">导航标题</label>
                        <input type="text" class="form-control" id="addNavTitle" name="title" required>
                    </div>
                    <div class="col-md-4">
                        <label for="addNavSort" class="form-label">排序顺序</label>
                        <input type="number" class="form-control" id="addNavSort" name="sortOrder" min="0" value="0">
                    </div>
                    <div class="col-12">
                        <label for="addNavUrl" class="form-label">链接地址</label>
                        <input type="url" class="form-control" id="addNavUrl" name="url" placeholder="http://或https://"
                               required>
                    </div>
                    <div class="col-12">
                        <label for="addNavImage" class="form-label">封面图片</label>
                        <input type="file" class="form-control" id="addNavImage" name="imageFile" accept="image/*">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                +
                <button type="button" class="btn btn-primary" id="submitNavigationAdd">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑分类模态框 -->
<div class="modal fade" id="editCategoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑分类</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editCategoryForm" action="/admin/category/update" method="post">
                    <input type="hidden" id="editCategoryId" name="id">
                    <div class="mb-3">
                        <label for="editCategoryName" class="form-label">分类名称</label>
                        <input type="text" class="form-control" id="editCategoryName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="editCategorySort" class="form-label">排序顺序</label>
                        <input type="number" class="form-control" id="editCategorySort" name="sortOrder" min="0">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitCategoryEdit">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑导航模态框 -->
<div class="modal fade" id="editNavigationModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">编辑导航</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editNavigationForm" action="/admin/navigation/update" method="post"
                      enctype="multipart/form-data">
                    <input type="hidden" id="editNavigationId" name="id">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="editNavCategory" class="form-label">所属分类</label>
                            <select class="form-select" id="editNavCategory" name="categoryId" required>
                                <option value="">请选择分类</option>
                                <option th:each="category : ${categories}"
                                        th:value="${category.id}"
                                        th:text="${category.name}">技术学习
                                </option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="editNavTitle" class="form-label">导航标题</label>
                            <input type="text" class="form-control" id="editNavTitle" name="title" required>
                        </div>
                        <div class="col-md-4">
                            <label for="editNavSort" class="form-label">排序顺序</label>
                            <input type="number" class="form-control" id="editNavSort" name="sortOrder" min="0">
                        </div>
                        <div class="col-12">
                            <label for="editNavUrl" class="form-label">链接地址</label>
                            <input type="url" class="form-control" id="editNavUrl" name="url"
                                   placeholder="http://或https://" required>
                        </div>
                        <div class="col-12">
                            <label for="editNavImage" class="form-label">封面图片（不修改请留空）</label>
                            <input type="file" class="form-control" id="editNavImage" name="imageFile" accept="image/*">
                            <div id="currentImageContainer" class="mt-2">
                                <img id="currentNavImage" class="image-preview">
                                <span id="noCurrentImage" class="d-none">无图片</span>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitNavigationEdit">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加分类模态框 -->
<div class="modal fade" id="addCategoryModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加分类</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addCategoryForm" action="/admin/category/add" method="post">
                    <div class="mb-3">
                        <label for="addCategoryName" class="form-label">分类名称</label>
                        <input type="text" class="form-control" id="addCategoryName" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="addCategorySort" class="form-label">排序顺序</label>
                        <input type="number" class="form-control" id="addCategorySort" name="sortOrder" min="0"
                               value="0">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitCategoryAdd">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 删除确认模态框 -->
<div class="modal fade" id="delete-confirm-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="delete-confirm-text">确定要删除吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirm-delete">确认删除</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改密码模态框 -->
<div class="modal fade" id="changePasswordModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改密码</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- 修正action路径，使用Thymeleaf语法 -->
                <form id="changePasswordForm" th:action="@{/admin/change-password}" method="post">
                    <div class="mb-3">
                        <label for="currentPassword" class="form-label">当前密码</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="currentPassword" name="currentPassword" required>
                            <button type="button" class="btn btn-outline-secondary toggle-password" data-target="currentPassword">
                                <i class="fa fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="newPassword" class="form-label">新密码</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="newPassword" name="newPassword" required minlength="6">
                            <button type="button" class="btn btn-outline-secondary toggle-password" data-target="newPassword">
                                <i class="fa fa-eye"></i>
                            </button>
                        </div>
                        <div class="form-text">密码长度至少6位</div>
                    </div>
                    <div class="mb-3">
                        <label for="confirmPassword" class="form-label">确认新密码</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="confirmPassword" required>
                            <button type="button" class="btn btn-outline-secondary toggle-password" data-target="confirmPassword">
                                <i class="fa fa-eye"></i>
                            </button>
                        </div>
                        <div class="invalid-feedback" id="confirmPasswordError">两次输入的密码不一致</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitChangePassword">确认修改</button>
            </div>
        </div>
    </div>
</div>
<!-- Bootstrap JS -->
<script th:src="@{/js/bootstrap.js}"></script>
<script th:src="@{/js/jQuery.js}"></script>
<script th:src="@{/js/tables.js}"></script>
<!-- 在页面底部添加JavaScript代码 -->
<!--修改密码js-->
<script>
    // 显示/隐藏密码功能
    document.querySelectorAll('.toggle-password').forEach(button => {
        button.addEventListener('click', function () {
            const targetId = this.getAttribute('data-target');
            const passwordInput = document.getElementById(targetId);
            const icon = this.querySelector('i');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        });
    });

    // 密码确认验证
    document.getElementById('confirmPassword').addEventListener('input', function () {
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = this.value;
        const errorElement = document.getElementById('confirmPasswordError');

        if (newPassword !== confirmPassword) {
            this.classList.add('is-invalid');
            errorElement.style.display = 'block';
        } else {
            this.classList.remove('is-invalid');
            errorElement.style.display = 'none';
        }
    });

    // 表单提交
    document.getElementById('submitChangePassword').addEventListener('click', function() {
        const currentPassword = document.getElementById('currentPassword').value;
        const newPassword = document.getElementById('newPassword').value;
        const confirmPassword = document.getElementById('confirmPassword').value;

        // 验证表单
        if (!validatePasswordForm(currentPassword, newPassword, confirmPassword)) {
            return;
        }

        // 使用Fetch API（现代浏览器推荐）
        fetch('/admin/change-password', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams({
                currentPassword: currentPassword,
                newPassword: newPassword
            })
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // 关闭模态框
                    const modal = bootstrap.Modal.getInstance(document.getElementById('changePasswordModal'));
                    modal.hide();
                    // 显示成功消息
                    showToast('success', data.message);
                    // 清空表单
                    document.getElementById('changePasswordForm').reset();
                } else {
                    showToast('error', data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showToast('error', '修改密码失败: ' + error.message);
            });
    });

    function validatePasswordForm(currentPassword, newPassword, confirmPassword) {
        if (!currentPassword) {
            showToast('error', '请输入当前密码');
            return false;
        }

        if (!newPassword || newPassword.length < 6) {
            showToast('error', '新密码长度至少6位');
            return false;
        }

        if (newPassword !== confirmPassword) {
            showToast('error', '两次输入的新密码不一致');
            return false;
        }

        return true;
    }

    // 模态框显示时重置表单
    document.getElementById('changePasswordModal').addEventListener('show.bs.modal', function () {
        document.getElementById('changePasswordForm').reset();
        document.getElementById('confirmPassword').classList.remove('is-invalid');
        document.getElementById('confirmPasswordError').style.display = 'none';
    });

    // 处理消息提示
    document.addEventListener('DOMContentLoaded', function () {
        // 显示flash消息
        const message = /*[[${message}]]*/ null;
        const error = /*[[${error}]]*/ null;
    });

    // 显示Toast消息函数
    function showToast(type, message) {
        // 创建Toast容器（如果不存在）
        let toastContainer = document.getElementById('toast-container');
        if (!toastContainer) {
            toastContainer = document.createElement('div');
            toastContainer.id = 'toast-container';
            toastContainer.className = 'position-fixed top-0 end-0 p-3';
            toastContainer.style.zIndex = '9999';
            document.body.appendChild(toastContainer);
        }

        // 创建Toast元素
        const toastId = 'toast-' + Date.now();
        const toastHtml = `
        <div id="${toastId}" class="toast align-items-center text-white bg-${type === 'success' ? 'success' : 'danger'} border-0" role="alert">
            <div class="d-flex">
                <div class="toast-body">
                    <i class="fa ${type === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'} me-2"></i>
                    ${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    `;

        toastContainer.insertAdjacentHTML('beforeend', toastHtml);

        // 显示Toast
        const toastElement = document.getElementById(toastId);
        const toast = new bootstrap.Toast(toastElement);
        toast.show();

        // 自动移除Toast
        toastElement.addEventListener('hidden.bs.toast', function () {
            this.remove();
        });
    }
</script>
<script>
    // DOM加载完成后执行
    document.addEventListener('DOMContentLoaded', function () {
        // 初始化表格
        initTables();

        // 初始化导航
        initNavigation();

        // 初始化事件监听
        initEventListeners();

    });

    // 初始化表格
    function initTables() {
        // 分类表格
        new simpleDatatables.DataTable("#categoryTable", {
            perPage: 10,
            perPageSelect: [5, 10, 20, 50],
            searchable: true,
            sortable: true
        });

        // 导航表格
        new simpleDatatables.DataTable("#navigationTable", {
            perPage: 10,
            perPageSelect: [5, 10, 20, 50],
            searchable: true,
            sortable: true
        });

    }

    document.getElementById('submitNavigationAdd').addEventListener('click', function () {
        document.getElementById('addNavigationForm').submit();
    });

    // 初始化导航
    function initNavigation() {
        // 导航链接点击事件
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();

                // 移除所有激活状态
                document.querySelectorAll('.nav-link').forEach(item => {
                    item.classList.remove('active');
                });
                document.querySelectorAll('.page-content').forEach(page => {
                    page.classList.remove('active');
                });

                // 添加当前激活状态
                this.classList.add('active');
                const targetId = this.getAttribute('href').substring(1);
                document.getElementById(targetId).classList.add('active');

                // 在移动设备上点击导航后隐藏侧边栏
                if (window.innerWidth <= 768) {
                    document.querySelector('.sidebar').classList.remove('show');
                }
            });
        });

        // 移动端菜单切换
        document.querySelector('.mobile-menu-toggle').addEventListener('click', function () {
            document.querySelector('.sidebar').classList.toggle('show');
        });
    }

    // 初始化事件监听
    function initEventListeners() {
        // 标题管理相关
        document.getElementById('save-title').addEventListener('click', function () {
            document.getElementById('title-form').submit();
        });

        // 分类相关
        document.getElementById('add-category').addEventListener('click', function () {
            document.getElementById('addCategoryName').value = '';
            document.getElementById('addCategorySort').value = '0';
            const modal = new bootstrap.Modal(document.getElementById('addCategoryModal'));
            modal.show();
        });
        // 添加分类提交
        document.getElementById('submitCategoryAdd').addEventListener('click', function () {
            document.getElementById('addCategoryForm').submit();
        });

        // 编辑分类按钮事件
        document.querySelectorAll('.edit-category').forEach(button => {
            button.addEventListener('click', function () {
                const id = this.getAttribute('data-id');
                const name = this.getAttribute('data-name');
                const sort = this.getAttribute('data-sort');

                document.getElementById('editCategoryId').value = id;
                document.getElementById('editCategoryName').value = name;
                document.getElementById('editCategorySort').value = sort;

                const modal = new bootstrap.Modal(document.getElementById('editCategoryModal'));
                modal.show();
            });
        });

        // 提交分类编辑
        document.getElementById('submitCategoryEdit').addEventListener('click', function () {
            document.getElementById('editCategoryForm').submit();
        });

        // 编辑导航按钮事件
        document.querySelectorAll('.edit-navigation').forEach(button => {
            button.addEventListener('click', function () {
                const id = this.getAttribute('data-id');
                const categoryId = this.getAttribute('data-category-id');
                const title = this.getAttribute('data-title');
                const url = this.getAttribute('data-url');
                const sort = this.getAttribute('data-sort');
                const imageUuid = this.getAttribute('data-image-uuid');

                // 修复弹窗数据不正确的问题
                document.getElementById('editNavigationId').value = id || '';
                document.getElementById('editNavCategory').value = categoryId || '';
                document.getElementById('editNavTitle').value = title || '';
                document.getElementById('editNavUrl').value = url || '';
                document.getElementById('editNavSort').value = sort || 0;

                // 处理图片预览 - 修复图片显示问题
                const imageElement = document.getElementById('currentNavImage');
                const noImageElement = document.getElementById('noCurrentImage');

                if (imageUuid && imageUuid.trim() !== '') {
                    imageElement.src = '/image/' + imageUuid;
                    imageElement.classList.remove('d-none');
                    noImageElement.classList.add('d-none');
                } else {
                    imageElement.src = '';
                    imageElement.classList.add('d-none');
                    noImageElement.classList.remove('d-none');
                }

                const modal = new bootstrap.Modal(document.getElementById('editNavigationModal'));
                modal.show();
            });
        });

        // 提交导航编辑
        document.getElementById('submitNavigationEdit').addEventListener('click', function () {
            document.getElementById('editNavigationForm').submit();
        });


    }
</script>
</body>
</html>